<template>
  <!-- 广告组 -->
  <div
    v-loading="loading"
    class="flex bid-header"
    :element-loading-text="loadingTxt"
  >
    <div class="appInfo flex">
      <div class="lt img">
        <el-image
          :src="appInfo.icon"
          style="height: 100%; width: 100%"
          fit="cover"
        >
          <div
            slot="error"
            class="image-slot flex"
            style="
              height: 100%;
              width: 100%;
              justify-content: center;
              background-color: #f5f7fa;
            "
          >
            <i
              class="el-icon-picture-outline"
              style="font-size: 24px; color: #d9d9d9"
            />
          </div>
        </el-image>
      </div>
      <div class="rt">
        <el-tooltip
          class="item"
          effect="dark"
          :content="detailInfo.name"
          placement="top-start"
        >
          <p class="title" style="max-width: 160px">
            <span
              class="overflow-ellipsis webfont-Medium"
              style="
                max-width: 160px;
                font-size: 18px;
                margin: 0 auto 0 1px;
                line-height: 19px;
              "
              >{{ detailInfo.name }}</span
            >
          </p>
        </el-tooltip>
        <div class="flex">
          <p class="sub-title">广告组ID: {{ detailInfo.adGroupId }}</p>

          <div class="status-box">
            <p
              v-if="
                campaignForm.displayStatus !== 'RUNNING' ||
                (campaignForm.servingStateReasons !== undefined &&
                  campaignForm.servingStateReasons !== null &&
                  campaignForm.servingStateReasons &&
                  campaignForm.servingStateReasons.length)
              "
              style="
                display: flex;
                align-items: center;
                justify-content: center;
              "
            ></p>
            <div v-if="detailInfo.campaignDisplayStatus === 'ON_HOLD'">
              <p
                style="
                  position: relative;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <!-- <em v-if="editBtnShow" class="pointer" style="right: 50%;transform: translateX(50%);" @click="handleSuspend">暂停</em> -->
                <el-switch
                  v-if="editBtnShow"
                  :value="false"
                  active-color="#13ce66"
                  style="
                    right: 50%;
                    transform: translateX(50%);
                    position: absolute;
                    top: -40px;
                  "
                  @change="handleSuspend"
                >
                </el-switch>
                <span>
                  <i class="yellow-color status-dot" />
                  <span>广告系列暂缓</span></span
                >
              </p>
            </div>
            <!-- 判断苹果状态 -->
            <div v-else>
              <p
                v-if="detailInfo.displaystatus === 'RUNNING'"
                style="
                  position: relative;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <!-- <em v-if="editBtnShow" class="pointer" style="right: 50%;transform: translateX(50%);" @click="handleSuspend">暂停</em> -->
                <el-switch
                  v-if="editBtnShow"
                  :value="true"
                  active-color="#13ce66"
                  style="
                    right: 50%;
                    transform: translateX(50%);
                    position: absolute;
                    top: -40px;
                  "
                  @change="handleSuspend"
                >
                </el-switch>
                <span>
                  <i class="liu-color status-dot" /> <span>正在投放</span></span
                >
              </p>
              <p
                v-else-if="detailInfo.displaystatus === 'ON_HOLD'"
                style="
                  position: relative;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <!-- <em v-if="editBtnShow" class="pointer" style="right: 50%;transform: translateX(50%);" @click="handleSuspend">暂停</em> -->
                <el-switch
                  v-if="editBtnShow"
                  :value="true"
                  active-color="#13ce66"
                  style="
                    right: 50%;
                    transform: translateX(50%);
                    position: absolute;
                    top: -40px;
                  "
                  @change="handleSuspend"
                >
                </el-switch>
                <span>
                  <i class="yellow-color status-dot" />
                  <span>广告系列暂缓</span></span
                >
              </p>
              <p
                v-else-if="detailInfo.displaystatus === 'CAMPAIGN_ON_HOLD'"
                style="
                  position: relative;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <!-- <em v-if="editBtnShow" class="pointer" style="right: 50%;transform: translateX(50%);" @click="handleSuspend">暂停</em> -->
                <el-switch
                  v-if="editBtnShow"
                  :value="true"
                  active-color="#13ce66"
                  style="
                    right: 50%;
                    transform: translateX(50%);
                    position: absolute;
                    top: -40px;
                  "
                  @change="handleSuspend"
                >
                </el-switch>
                <span>
                  <i class="yellow-color status-dot" />
                  <span>广告系列暂停</span></span
                >
              </p>
              <p
                v-else-if="detailInfo.displayStatus === 'PAUSED'"
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  position: relative;
                "
              >
                <el-switch
                  v-if="editBtnShow"
                  :value="false"
                  active-color="#13ce66"
                  style="
                    right: 50%;
                    transform: translateX(50%);
                    position: absolute;
                    top: -40px;
                  "
                  @change="handleOpen"
                >
                </el-switch>
                <i class="yellow-color status-dot" />
                <span>已暂停</span>
              </p>
              <div
                v-else
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  position: relative;
                "
              >
                <!-- <em v-if="editBtnShow" class="pointer" style="right: 50%;transform: translateX(50%);" @click="handleOpen">开启</em> -->
                <el-switch
                  v-if="editBtnShow"
                  :value="false"
                  active-color="#13ce66"
                  style="
                    right: 50%;
                    transform: translateX(50%);
                    position: absolute;
                    top: -40px;
                  "
                  @change="handleOpen"
                >
                </el-switch>
                <p>
                    <i class="yellow-color status-dot" />
                    <!-- <span v-if="statusList && statusList.length">{{
                      statusList[0]
                    }}</span> -->
                    <span v-if="detailInfo.displayStatus === 'ON_HOLD'"
                      >暂缓</span
                    >
                    <span v-else>暂停</span>
                  </p>
                <!-- <el-tooltip placement="top" class="sec">
                  <div slot="content">
                    <p v-for="v in statusList" style="color: #fff">{{ v }}</p>
                  </div>
                  <p>
                    <i class="yellow-color status-dot" />
                    <span v-if="statusList && statusList.length">{{
                      statusList[0]
                    }}</span>
                    <span v-if="detailInfo.displayStatus === 'ON_HOLD'"
                      >暂缓</span
                    >
                    <span v-else>暂停</span>
                  </p>
                </el-tooltip> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="info-box flex">
      <div v-if="campaignForm.adchannelType === 'SEARCH'" class="item area">
        <!--  -->
        <!-- SEARCH:搜索结果 -->
        <p class="title webfont-Bold">
          {{ unitTxt }}{{ (detailInfo.defaultBidAmount * 1) | $toFixed(2) }}
        </p>
        <p class="sec">默认每次点击最高费用</p>
      </div>
      <div v-else class="item area">
        <p class="title webfont-Bold">
          {{ unitTxt }}{{ (detailInfo.defaultBidAmount * 1) | $toFixed(2) }}
        </p>
        <p class="sec">每千次点击费用出价上限</p>
      </div>
      <div v-if="campaignForm.adchannelType === 'SEARCH'" class="item area">
        <p class="title webfont-Bold">
          {{ detailInfo.automatedKeywordsOptin === "true" ? "开启" : "关闭" }}
        </p>
        <p class="sec">搜索匹配</p>
      </div>
      <div class="item area">
        <p class="title webfont-Bold">
          {{ info.sheBei }}
        </p>
        <p class="sec">设备</p>
      </div>
      <div class="item position">
        <p class="title webfont-Bold">
          {{ info.userType }}
        </p>
        <p class="sec">用户类型</p>
      </div>
      <div class="item position">
        <p class="title webfont-Bold">{{ info.sexStr }} : {{ info.ageStr }}</p>
        <p class="sec">受众特性</p>
      </div>
    </div>
    <div class="handle">
      <em
        v-if="
          detailInfo.displaystatus !== 'DELETED' &&
          editBtnShow &&
          campaignForm.displayStatus !== 'DELETED'
        "
        class="pointer"
        @click="eidtGroupSet"
        >修改广告组设置</em
      >
    </div>
    <!-- 修改广告组设置 -->
    <el-dialog
      title="修改广告组设置"
      :visible.sync="dialogVisible"
      width="600px"
      :before-close="handleClose"
      class="edit-ad"
    >
      <div
        v-loading="diaLoading"
        class="edit-box"
        :element-loading-text="diaLoadingTxt"
        style="max-width: 500px"
      >
        <el-form
          ref="adGroupForm1"
          size="small"
          :rules="rules"
          :model="adGroupForm"
          label-position="top"
          class="demo-ruleForm"
        >
          <el-form-item label="广告组名称" prop="name">
            <el-input
              v-model="adGroupForm.name"
              placeholder="请输入广告组名称"
            />
          </el-form-item>
          <el-form-item
            v-if="campaignForm.adchannelType !== 'SEARCH'"
            prop="defaultBidAmountNub"
          >
            <div slot-name="label" class="label">
              <span style="font-size: 14px; color: #60626"
                >每千次点击费用出价上限</span
              >
              <el-popover
                placement="top-start"
                title="每千次展示费用出价上限"
                width="300"
                trigger="hover"
                content="这是你在 App Store 上针对每一千次广告展示次数愿意支付的最高金额。每当至少有 50% 的广告在一秒钟内被浏览时，就计为一次展示。"
              >
                <i
                  slot="reference"
                  class="el-icon-question"
                  style="margin-left: 6px"
                />
              </el-popover>
            </div>
            <amount-input
              v-model="adGroupForm.defaultBidAmountNub"
              :controls="false"
              :precision="2"
              placeholder="请输入默认每次最高每次点击费用出价"
            ></amount-input>
          </el-form-item>
          <template v-else>
            <el-form-item prop="defaultBidAmountNub">
              <div slot-name="label" class="label">
                <span style="font-size: 14px; color: #60626">
                  默认每次最高点击费用出价
                </span>
                <el-popover
                  placement="top-start"
                  title="默认最高点击费用出价"
                  width="300"
                  trigger="hover"
                  content="这是你愿意为每次广告点击支付的最高金额。此出价将适用于此广告组中的所有关键词，除非你申请了一个单独的关键词出价。"
                >
                  <i
                    slot="reference"
                    class="iconfont icon-question-circle"
                    style="margin-left: -12px"
                  />
                </el-popover>
              </div>
              <amount-input
                v-model="adGroupForm.defaultBidAmountNub"
                :controls="false"
                :precision="2"
                placeholder="请输入默认每次最高每次点击费用出价"
              ></amount-input>
            </el-form-item>
            <el-form-item prop="cpaGoalNub">
              <div slot-name="label" class="label">
                <!--   <div v-if="detailInfo.cpaGoalAmount&&detailInfo.cpaGoalAmount!==undefined&&detailInfo.cpaGoalAmount!==null&&detailInfo.cpaGoalAmount!==''&&detailInfo.cpaGoalAmount*100>0">
                  <em style="color: #F56C6C;">*</em>
                  <span style="font-size: 14px; color: #60626;"> 目标下载单价CPA</span>
                </div> -->
                <span style="font-size: 14px; color: #60626"
                  >目标下载单价CPA(可选)</span
                >
                <el-popover
                  placement="top-start"
                  title="目标下载单价"
                  width="300"
                  trigger="hover"
                  content="每次转化费用目标是你愿意为转化花费的金额。设置每次转化费用目标完全为可选项。"
                >
                  <i
                    slot="reference"
                    class="iconfont icon-question-circle"
                    style="margin-left: 6px"
                  />
                </el-popover>
              </div>
              <amount-input
                v-model="adGroupForm.cpaGoalNub"
                :controls="false"
                :precision="2"
                placeholder="请输入"
              ></amount-input>
            </el-form-item>
            <el-form-item>
              <div class="automatch">
                <div class="label">
                  <span style="font-size: 14px; color: #60626"
                    >自动将我的广告与相关搜索匹配</span
                  >
                  <el-popover
                    placement="top-start"
                    title="搜索匹配"
                    width="300"
                    trigger="hover"
                    content="搜索匹配使用多种资源将你的广告与 App Store 中的相关搜索进行自动匹配，其中包括你的 App Store 列表中的元数据、同一类型中类似 app 的相关信息以及其他搜索数据"
                  >
                    <i
                      slot="reference"
                      class="iconfont icon-question-circle"
                      style="margin-left: 6px"
                    />
                  </el-popover>
                </div>
                <el-switch
                  :value="adGroupForm.automatedKeywordsOptIn"
                  active-color="#24BEBE"
                  @change="changeSwitch"
                />
              </div>
            </el-form-item>
          </template>
        </el-form>
        <el-form
          ref="ruleForm"
          size="small"
          :model="ruleForm"
          status-icon
          label-position="top"
          class="demo-ruleForm"
        >
          <!-- 受众 -->
          <el-form-item>
            <el-collapse accordion class="shou-zhong-box">
              <el-collapse-item>
                <template slot="title">
                  <div
                    slot-name="label"
                    class="label"
                    style="padding-bottom: 0px !important"
                  >
                    <span>受众</span>
                  </div>
                </template>
                <!-- 设备 -->
                <el-form-item label="设备">
                  <el-select
                    v-model="targeForm.deviceClassStr"
                    placeholder="iPad和iphone"
                  >
                    <el-option
                      v-for="item in deviceList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                    <!-- 到时候还要转换成数组 -->
                  </el-select>
                </el-form-item>
                <!-- 用户 -->
                <el-form-item label="用户">
                  <el-select
                    v-model="targeForm.appDownloadersStr"
                    placeholder="所用用户"
                  >
                    <el-option label="所有用户" value="all" />
                    <el-option label="新用户" value="new" />
                  </el-select>
                </el-form-item>
                <el-form-item label="特征">
                  <el-row :gutter="14">
                    <el-col :span="12">
                      <el-select
                        v-model="targeForm.genderStr"
                        placeholder="所有性别"
                      >
                        <el-option label="所有性别" value="all" />
                        <el-option label="男性" value="M" />
                        <el-option label="女性" value="F" />
                      </el-select>
                      <!-- 到时候还要转换成数组 -->
                    </el-col>
                    <el-col :span="12">
                      <el-row :gutter="12">
                        <el-col :span="12">
                          <!-- 开始年龄 -->
                          <el-select
                            v-model="targeForm.minMaxAge.minAge"
                            placeholder="请选择最小年龄"
                          >
                            <el-option
                              v-for="item in ageList"
                              v-show="item.val * 1 !== 65"
                              :key="item.name"
                              :label="item.name"
                              :value="item.val"
                              :disabled="
                                item.val > targeForm.minMaxAge.maxAge &&
                                item.val !== 'all'
                              "
                            />
                          </el-select>
                        </el-col>
                        <el-col
                          v-if="
                            targeForm.minMaxAge.minAge !== 'all' &&
                            targeForm.minMaxAge.minAge !== 65
                          "
                          :span="12"
                        >
                          <!-- 结束年龄 -->
                          <el-select
                            v-model="targeForm.minMaxAge.maxAge"
                            placeholder="请选择最大年龄"
                          >
                            <template v-for="item in ageList">
                              <el-option
                                v-if="item.val !== 'all'"
                                :label="item.name"
                                :value="item.val"
                                :disabled="
                                  item.val < targeForm.minMaxAge.minAge
                                "
                              />
                            </template>
                          </el-select>
                        </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                </el-form-item>

                <el-form-item
                  :label="
                    countriesOrRegionsDisable
                      ? '目标地理位置(不可用)'
                      : '目标地理位置'
                  "
                >
                  <el-select
                    v-model="locVal"
                    :placeholder="countriesOrRegionsDisableText"
                    :disabled="countriesOrRegionsDisable"
                    multiple
                    filterable
                    remote
                    :remote-method="getLocation"
                    @change="handleLocChange"
                  >
                    <el-option
                      v-for="item in locList"
                      :key="item.displayname"
                      :label="item.displayname"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item
                  :label="
                    timeZone === 'UTC'
                      ? '广告投放时间设置(UTC)'
                      : '广告投放时间设置(亚洲/上海)'
                  "
                  prop="startTime"
                  class="choose-time-box"
                >
                  <el-row>
                    <el-col :span="24">
                      <p style="font-size: 14px">开始时间</p>
                      <el-col :span="12">
                        <el-date-picker
                          v-model="adGroupForm.startTime"
                          type="datetime"
                          placeholder="选择开始日期"
                          format="yyyy-MM-dd HH:mm"
                          value-format="yyyy-MM-dd HH:mm"
                          :picker-options="startTimeDay"
                          :disabled="startTimeDisabled"
                        />
                      </el-col>
                    </el-col>

                    <el-col :span="24">
                      <p>
                        <el-checkbox v-model="endTimeShow"
                          >结束时间(可选)</el-checkbox
                        >
                      </p>
                      <el-col v-if="endTimeShow" :span="24">
                        <el-col :span="12">
                          <el-date-picker
                            v-model="adGroupForm.endTime"
                            type="datetime"
                            placeholder="选择结束时间"
                            format="yyyy-MM-dd HH:mm"
                            value-format="yyyy-MM-dd HH:mm"
                          />
                        </el-col>
                      </el-col>
                    </el-col>
                  </el-row>
                </el-form-item>
                <el-form-item
                  v-if="this.campaignForm.adchannelType === 'SEARCH'"
                  label="分时段"
                >
                  <div class="day-prt-box">
                    <day-parting
                      ref="daypartBox"
                      v-model="targeForm.daypartInt"
                    />
                  </div>
                </el-form-item>
              </el-collapse-item>
            </el-collapse>
          </el-form-item>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button size="small" class="cancel-btn" @click="handleClose"
          >取 消</el-button
        >
        <el-button type="success" size="small" @click="handleSub"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { findAdgroupsOne, modifyAdgroups } from "@/api/overView.js";
import {
  findCampaignOne,
  adgroupIsEmptyName,
  searchApps,
  getSearchGeolocations,
} from "@/api/create.js";

import { findCountryByQuery } from "@/utils/index.js";

import {
  servingStateReasonsad,
  servingStateReasonscp,
} from "@/utils/servingStateReasons.js";
// import dataIntro from './components/data-intro.vue'
import dayParting from "@/components/dayParting/index.vue";
import amountInput from "@/components/amountInput/index.vue";
import dayjs from "dayjs";
const moment = dayjs;
var utc = require("dayjs/plugin/utc");
moment.extend(utc);
export default {
  components: {
    // dataIntro,
    dayParting,
    amountInput,
  },
  data() {
    const validateName = async (rule, value, callback) => {
      if (value === this.detailInfo.name) {
        callback();
      } else if (this.campaignForm.campaignId) {
        const obj = {
          adGroupName: value,
          orgId: this.$route.query.orgId || "", // 如果是自助投放为空
          uuid: this.$route.query.uuid || "",
          aId: this.$route.query.aId || this.$route.query.aid || "",
          campaignId: this.$route.query.campaignId,
          currencyType:
            this.$route.query.currencyType || this.$store.state.user.unit,
          teamId: this.$store.state.team.teamId || "",
        };
        const res = await adgroupIsEmptyName(obj);
        if (res.data.code) {
          if (res.data.data.length) {
            callback(new Error("广告组名称重复"));
          } else {
            callback();
          }
        } else {
          callback(new Error("服务器出现错误，请稍后重试"));
        }
      } else {
        callback();
      }
    };

    const validateDefaultBidAmountNub = (rule, value, callback) => {
      const str =
        this.campaignForm.adchannelType === "SEARCH"
          ? "最高出价"
          : "每千次展示费用出价上限";
      if (value * 100 < 1 || value > 1000) {
        callback(new Error(str + "必须至少为 $0.01且不得高于$1000.00"));
      } else if (value > this.campaignForm.dailyBudgetAmount * 1) {
        if (
          this.campaignForm.dailyBudgetAmount === null ||
          this.campaignForm.dailyBudgetAmount === undefined
        ) {
          if (value > this.campaignForm.budgetAmount * 1) {
            callback(
              new Error(
                str +
                  "不能大于广告系列预算" +
                  (this.campaignForm.budgetAmount * 1).toFixed(2)
              )
            );
          } else {
            callback();
          }
        } else {
          callback(
            new Error(
              str +
                "不能大于广告系列日预算" +
                (this.campaignForm.dailyBudgetAmount * 1).toFixed(2)
            )
          );
        }
      } else {
        callback();
      }
    };

    const validateCpaGoal = (rule, value, callback) => {
      if (
        this.adGroupForm.cpaGoalNub === undefined ||
        this.adGroupForm.cpaGoalNub === "" ||
        this.adGroupForm.cpaGoalNub === null
      ) {
        callback();
      } else if (
        this.adGroupForm.cpaGoalNub * 100 < 1 ||
        this.adGroupForm.cpaGoalNub > 1500
      ) {
        callback(new Error("必须至少为 $0.01且不得高于$1500.00"));
      } else if (
        this.adGroupForm.cpaGoalNub * 1 >
        this.campaignForm.dailyBudgetAmount * 1
      ) {
        if (
          this.campaignForm.dailyBudgetAmount === null ||
          this.campaignForm.dailyBudgetAmount === undefined
        ) {
          if (this.adGroupForm.cpaGoalNub > this.campaignForm.budgetAmount) {
            callback(
              new Error(
                "不能大于广告系列预算" +
                  (this.campaignForm.budgetAmount * 1).toFixed(2)
              )
            );
          } else {
            callback();
          }
        } else {
          callback(
            new Error(
              "不能大于广告系列日预算 " +
                (this.campaignForm.dailyBudgetAmount * 1).toFixed(2)
            )
          );
        }
      } else {
        callback();
      }
    };

    return {
      dialogVisible: false,
      loading: true,
      loadingTxt: "数据获取中，请稍候",
      diaLoading: false,
      diaLoadingTxt: "数据提交中，请稍候",
      detailInfo: {},
      appInfo: {
        icon: undefined,
      },
      info: {
        ageStr: "所有年龄段",
        sexStr: "性别不限",
        sheBei: "iPad和iPhone",
        name: "",
        icon: "",
        campaignId: this.$route.query.campaignId,
      },
      campaignForm: {},
      countriesOrRegionsDisable: true, // 地理位置不可用
      countriesOrRegionsDisableText: "待验证，暂不可用",
      locVal: [], // 地理位置选中的值，
      locList: [], //
      rules: {
        name: [
          {
            required: true,
            message: "请输入广告组名称",
            trigger: "blur",
          },
          {
            validator: validateName,
            trigger: "blur",
          },
        ],
        defaultBidAmountNub: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
          },
          {
            validator: validateDefaultBidAmountNub,
            trigger: "blur",
          },
        ],
        cpaGoalNub: [
          {
            validator: validateCpaGoal,
            trigger: "blur",
          },
        ],
      },
      // end
      startTimeDay: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8 * 1000 * 3600 - 8.64e7;
        },
      },
      endTimeShow: false,

      startTimeDisabled: false,
      adGroupForm: {
        name: "",
        defaultBidAmountNub: undefined,
        startTime: null,
        endTime: null,
      },
      adGroupFormCopy: undefined,
      targeFormCopy: undefined,
      targeForm: {
        // 受众表单
        appDownloadersStr: "all", //	如果填写当前app的appid，就代表只允许新用户下载，不然到时候就为空
        minMaxAge: {
          // 年龄
          minAge: "all", // 最小年龄
          maxAge: 65, // 最大年龄
        },
        deviceClassStr: "IPAD,IPHONE", // 设备 到时候要转换成数组
        genderStr: "all", // 性别   到时候要转换成数组
        daypartInt: [], // 投放时间  分时段
      },

      ageList: [
        {
          name: "不限年龄段",
          val: "all",
        },
      ],

      deviceList: [
        {
          label: "仅限iPad",
          value: "IPAD",
        },
        {
          label: "仅限iPhone",
          value: "IPHONE",
        },
        {
          label: "iPad 和 iPhone",
          value: "all",
        },
      ],
    };
  },

  computed: {
    statusList() {
      if (
        this.detailInfo.servingstatereasons &&
        this.detailInfo.servingstatereasons !== undefined &&
        this.detailInfo.servingstatereasons !== null &&
        this.detailInfo.servingstatereasons.length
      ) {
        return servingStateReasonsad(this.detailInfo.servingstatereasons);
      } else {
        return [];
      }
    },

    timeZone() {
      return this.$store.state.user.timeZone;
    },

    unitTxt() {
      return this.$store.state.user.unit === "USD" ? "$" : "￥";
    },
    editBtnShow() {
      if (
        this.$route.query.uuid &&
        (this.$route.query.orgId || this.$route.query.orgid)
      ) {
        const index = this.$store.state.overview.allAc.findIndex((item) => {
          return item.uuid === this.$route.query.uuid;
        });

        if (
          this.$store.state.overview.allAc[index].roleName ===
            "invalid_client" ||
          this.$store.state.overview.allAc[index].roleName === "API Read Only"
        ) {
          return false;
        }

        const i = this.$store.state.overview.allAc[index].org.findIndex(
          (item) => {
            return (
              item.orgId === this.$route.query.orgId * 1 ||
              item.orgId === this.$route.query.orgid * 1
            );
          }
        );

        const orgRole = this.$store.state.overview.allAc[index].org[i].roleName;
        return (
          orgRole !== "API Read Only" &&
          orgRole !== "invalid_client" &&
          !this.$isReadOnly(this.$store.state.user.userInfo.roleName)
        );
      } else {
        return !this.$isReadOnly(this.$store.state.user.userInfo.roleName);
      }
    },
  },

  watch: {
    timeZone() {
      this.findAdgroupsOne();
    },

    campaignForm: {
      deep: true,
      handler: async function (newVal, oldVal) {
        if (
          !this.campaignForm.countriesOrRegions ||
          !this.campaignForm.countriesOrRegions.length ||
          this.campaignForm.countriesOrRegions.length > 1
        ) {
          this.countriesOrRegionsDisable = true;
          this.countriesOrRegionsDisableText =
            "如果你的广告系列是针对多个国家和地区设置的，则不可用";
        } else {
          const res = await getSearchGeolocations({
            country: this.campaignForm.countriesOrRegions[0],
            search: "",
          });

          if (res.data.code === 20000 && res.data.data.length) {
            this.countriesOrRegionsDisable = false;

            this.countriesOrRegionsDisableText = "请选择位置";
          } else {
            this.countriesOrRegionsDisable = true;
            this.countriesOrRegionsDisableText =
              "地理位置细分在此国家或地区不可用";
          }
        }
      },
    },
  },

  mounted() {
    // 循环出年龄段可选项目
    for (let i = 18; i < 66; i++) {
      const obj = {
        name: i,
        val: i,
      };
      if (i === 65) {
        obj.name = "65+";
      }
      this.ageList.push(obj);
    }
    if (this.$store.state.overview.allAc.length > 0) {
      this.findAdgroupsOne();
      this.findCampaignOne();
    }
  },
  methods: {
    // 查询广告系列状态值
    findServingStateReasonscp(type) {
      const arr = servingStateReasonscp(type);
      return arr;
    },

    // 查询单个adGroup
    async findAdgroupsOne() {
      this.loading = true;
      this.loadingTxt = "数据获取中，请稍候";

      const obj = {
        teamId: this.$store.state.team.teamId || "",
        adgroupId: this.$route.query.adGroupId,
        orgId: this.$route.query.orgId || "", // 如果是自助投放为空
        uuid: this.$route.query.uuid || "",
        aId: this.$route.query.aId || this.$route.query.aid || "",
        currencyType:
          this.$route.query.currencyType || this.$store.state.user.unit,
      };
      const res = await findAdgroupsOne(obj);
      this.loading = false;
      this.$forceUpdate();

      if (res.data.code && res.data.code === 20000) {
        this.loading = false;
        this.detailInfo = res.data.data;
        this.$store.dispatch("overview/editOneAd", res.data.data);
        const data = res.data.data;
        this.info.name = data.name;
        this.adGroupForm.name = data.name; // 还原广告组设置
        if (
          !data.defaultBidAmount ||
          data.defaultBidAmount === null ||
          data.defaultBidAmount === undefined
        ) {
          this.adGroupForm.defaultBidAmountNub = undefined;
        } else {
          this.adGroupForm.defaultBidAmountNub = data.defaultBidAmount * 1;
        }

        if (
          !data.cpaGoalAmount ||
          data.cpaGoalAmount === null ||
          data.cpaGoalAmount === undefined
        ) {
          this.adGroupForm.cpaGoalNub = undefined;
        } else {
          this.adGroupForm.cpaGoalNub = data.cpaGoalAmount * 1;
        }

        // 还原年龄段
        if (!data.targetingMinage && !data.targetingMaxage) {
          this.targeForm.minMaxAge.minAge = "all";
          this.info.ageStr = "所有年龄段";
        } else {
          this.targeForm.minMaxAge.minAge = data.targetingMinage;
          this.targeForm.minMaxAge.maxAge = data.targetingMaxage
            ? data.targetingMaxage
            : 65;
          this.info.ageStr = `${data.targetingMinage} ~ ${
            data.targetingMaxage ? data.targetingMaxage : "65+"
          }`;
        }

        // 还原设备
        if (
          !data.targetingDeviceclass ||
          data.targetingDeviceclass === '["IPAD","IPHONE"]' ||
          data.targetingDeviceclass === '["IPHONE","IPAD"]'
        ) {
          this.targeForm.deviceClassStr = "all";
          this.info.sheBei = "iPhone和iPad";
        } else if (data.targetingDeviceclass.indexOf("IPAD") !== -1) {
          this.info.sheBei = "iPad";
          this.targeForm.deviceClassStr = "IPAD";
        } else {
          this.info.sheBei = "iPhone";
          this.targeForm.deviceClassStr = "IPHONE";
        }

        if (data.targetingLocality || data.targetingAdminarea) {
          if (
            this.campaignForm.countriesOrRegions &&
            this.campaignForm.countriesOrRegions.length > 1
          ) {
            this.locVal = [];
            this.locList = [];
          } else {
            const AdminareaArr =
              data.adminareaList && data.adminareaList.length
                ? data.adminareaList
                : [];
            const LocalityArr =
              data.localityList && data.localityList.length
                ? data.localityList
                : [];
            this.locList = [...AdminareaArr, ...LocalityArr];

            this.locVal = this.locList.map((item) => {
              return item.id;
            });
          }
        } else {
          this.locVal = [];
          this.locList = [];
        }

        // 还原受众性别
        if (
          !data.targetingGender ||
          data.targetingGender === "F,M" ||
          data.targetingGender === '["F","M"]'
        ) {
          this.targeForm.genderStr = "all";
          this.info.sexStr = "性别不限";
        } else if (data.targetingGender.indexOf("M") !== -1) {
          this.targeForm.genderStr = "M";
          this.info.sexStr = "男性";
        } else {
          this.targeForm.genderStr = "F";
          this.info.sexStr = "女性";
        }

        // 还原用户类型
        if (
          !data.targetingappDownloaders ||
          data.targetingappDownloaders === "[]"
        ) {
          this.targeForm.appDownloadersStr = "all";
          this.info.userType = "所有用户";
        } else {
          this.targeForm.appDownloadersStr = "new";
          this.info.userType = "仅限新用户";
        }

        // 还原受众的开始时间   开始时间如早于当前时间  则不能改动  如果晚于当前时间则可以改动
        if (data.startTime) {
          const str = data.startTime;
          const day = moment(str).format("YYYY-MM-DD HH:mm");
          const nowTime = moment().utc().format("YYYY-MM-DD HH:mm");
          this.adGroupForm.startTime = day;
          var isDisabled = moment(day).isBefore(moment(nowTime));
          this.startTimeDisabled = isDisabled;
          if (this.timeZone !== "UTC") {
            this.adGroupForm.startTime = moment(day)
              .add(8, "hour")
              .format("YYYY-MM-DD HH:mm");
          }
        }

        // 还原受众的结束时间  提交改动时  如果结束时间早于当前时间则不予提交，并提示用户
        if (
          data.endTime &&
          data.endTime !== null &&
          data.endTime !== undefined
        ) {
          const str = data.endTime;
          const endDay = moment(str).format("YYYY-MM-DD HH:mm");
          const time = moment(str).format("HH:mm");
          this.endTimeShow = true;
          this.adGroupForm.endTime = endDay;
          if (this.timeZone !== "UTC") {
            this.adGroupForm.endTime = moment(endDay)
              .add(8, "hour")
              .format("YYYY-MM-DD HH:mm");
          }
        }
      } else {
        this.$message.closeAll();
        this.$message.error(res.data.message || "服务器错误，请稍后重试");
      }
    },
    // 根据orgid、campaignId查询某个Campaign详情

    async findCampaignOne() {
      const obj = {
        teamId: this.$store.state.team.teamId || "",
        orgId: this.$route.query.orgId || "", // 如果是自助投放为空
        uuid: this.$route.query.uuid || "",
        aId: this.$route.query.aId || this.$route.query.aid || "",
        campaignId: this.$route.query.campaignId,
        campaignGroupId: this.$route.query.serialId || "",
        countrySX: this.$store.state.user.timeZone, // 时区
        timeZone: this.$store.getters.timeZoneTime,
      };
      const allCa = this.$store.state.overview.allCa;
      const index = allCa.findIndex((item) => {
        return item.campaignId * 1 === obj.campaignId * 1;
      });

      const countryArr = findCountryByQuery(
        allCa[index].countriesOrRegions,
        true
      );
      const strArr = countryArr.map((item) => {
        return item.short;
      });
      obj.country = strArr.join(",");
      // obj.currencyType = allCa[index].budgetCurrency
      obj.currencyType = this.$store.state.user.unit;
      const res = await findCampaignOne(obj);
      if (res.data.code === 20000) {
        this.info = { ...this.info, icon: res.data.data.icon };

        const caInfo = res.data.data;
        const str = caInfo.countriesOrRegions;
        const arrStr = str.substring(1, str.length - 1);
        const countryArr = arrStr.split(",");
        this.campaignForm = { ...caInfo, countriesOrRegions: countryArr };
        this.searchApps();
      } else {
        this.$message.closeAll();
        this.$message.error(res.data.message || "导出数据失败，请稍后重试");
      }
    },

    // appid的具体信息并设置可选的国家
    async searchApps() {
      const id = this.campaignForm.adamId;
      const res = await searchApps(id);
      if (res.data.code === 20000) {
        // 存储起来
        this.appInfo =
          res.data.data.length > 0
            ? JSON.parse(JSON.stringify(res.data.data[0]))
            : "";
        if (this.appInfo) {
          if (this.appInfo.devices.indexOf("iphone") === -1) {
            this.targeForm.deviceClassStr = "IPAD";
            this.deviceList = [
              {
                label: "仅限iPad",
                value: "IPAD",
              },
            ];
          }

          if (this.appInfo.devices.indexOf("ipad") === -1) {
            this.targeForm.deviceClassStr = "IPHONE";
            this.deviceList = [
              {
                label: "仅限iPhone",
                value: "IPHONE",
              },
            ];
          }
        }
      } else {
        this.cities = JSON.parse(JSON.stringify(this.countryData));
      }
    },
    // 使广告组开启
    handleOpen() {
      this.loading = true;
      this.diaLoading = true;
      this.loadingTxt = "设置提交中，请稍候";
      const obj = {
        teamId: this.$store.state.team.teamId || "",
        currencyType:
          this.$route.query.currencyType || this.$store.state.user.unit,
        campaignId: this.$route.query.campaignId,
        orgId: this.$route.query.orgId || "", // 如果是自助投放为空
        uuid: this.$route.query.uuid || "",
        aId: this.$route.query.aId || this.$route.query.aid || "",
        userId: this.$store.state.user.userInfo.userId,
        adGroupId: this.detailInfo.adGroupId,
        adGroupUpdate: {
          status: "ENABLED",
        },
      };

      this.handleSubEdit(obj);
    },
    // 使广告组暂停
    handleSuspend() {
      this.loading = true;
      this.diaLoading = true;
      this.loadingTxt = "设置提交中，请稍候";
      const obj = {
        teamId: this.$store.state.team.teamId || "",
        currencyType:
          this.$route.query.currencyType || this.$store.state.user.unit,
        campaignId: this.$route.query.campaignId,
        orgId: this.$route.query.orgId || "", // 如果是自助投放为空
        uuid: this.$route.query.uuid || "",
        aId: this.$route.query.aId || this.$route.query.aid || "",
        userId: this.$store.state.user.userInfo.userId,
        adGroupId: this.detailInfo.adGroupId,
        adGroupUpdate: {
          status: "PAUSED",
        },
      };

      this.handleSubEdit(obj);
    },

    // 目标地理位置搜索方法
    async getLocation(val) {
      if (val.length < 1) return false;
      const obj = {
        country: this.campaignForm.countriesOrRegions[0],
        search: val,
      };
      const res = await getSearchGeolocations(obj);
      if (res.data.code * 1 === 20000) {
        this.locList = [...res.data.data, ...this.locList];
      } else {
        this.$message.closeAll();
        this.$message.error(res.data.message || "服务器错误，请稍候刷新重试");
      }
    },

    // 点击了修改按钮
    eidtGroupSet() {
      if (this.campaignForm.adchannelType === "SEARCH") {
        // 还原自动搜索匹配
        this.detailInfo.automatedKeywordsOptin === "true"
          ? (this.adGroupForm.automatedKeywordsOptIn = true)
          : (this.adGroupForm.automatedKeywordsOptIn = false);
        // 还原目标下载单价

        if (
          !this.detailInfo.cpaGoalAmount ||
          this.detailInfo.cpaGoalAmount === null ||
          this.detailInfo.cpaGoalAmount === undefined
        ) {
          this.adGroupForm.cpaGoalNub = undefined;
        } else {
          this.adGroupForm.cpaGoalNub = this.detailInfo.cpaGoalAmount * 1;
        }

        // 还原分时
        if (
          this.detailInfo.targetingDaypart &&
          this.detailInfo.targetingDaypart !== null &&
          this.detailInfo.targetingDaypart !== undefined
        ) {
          const str = this.detailInfo.targetingDaypart.substring(
            1,
            this.detailInfo.targetingDaypart.length - 1
          );
          this.targeForm.daypartInt = str.split(",").map((item) => {
            return item * 1;
          });
        } else {
          this.targeForm.daypartInt = [];
        }
      }
      // 还原地理位置信息
      if (
        (this.detailInfo.adminareaList &&
          this.detailInfo.adminareaList.length) ||
        (this.detailInfo.localityList && this.detailInfo.localityList.length)
      ) {
        this.locList = [];
        if (
          this.detailInfo.adminareaList &&
          this.detailInfo.adminareaList.length
        ) {
          this.locList.push(...this.detailInfo.adminareaList);
        }
        if (
          this.detailInfo.localityList &&
          this.detailInfo.localityList.length
        ) {
          this.locList.push(...this.detailInfo.localityList);
        }

        this.locVal = this.locList.map((item) => {
          return item.id;
        });
      } else {
        this.locList = [];
        this.locVal = [];
      }
      this.adGroupFormCopy = JSON.stringify(this.adGroupForm);
      this.targeFormCopy = JSON.stringify(this.targeForm);
      this.dialogVisible = true;
    },

    handleClose() {
      this.adGroupForm = JSON.parse(this.adGroupFormCopy);
      this.targeForm = JSON.parse(this.targeFormCopy);
      this.$refs["adGroupForm1"].resetFields();
      this.$refs["ruleForm"].resetFields();
      const data = JSON.parse(JSON.stringify(this.detailInfo));
      // 还原受众的开始时间   开始时间如早于当前时间  则不能改动  如果晚于当前时间则可以改动
      if (data.startTime) {
        const str = data.startTime;
        const day = moment(str).format("YYYY-MM-DD HH:mm");
        this.adGroupForm.startTime = day;

        // 判断是否早于
        var isDisabled = moment(day).isBefore(moment().utc());
        this.startTimeDisabled = isDisabled;
      }
      // 还原受众的结束时间  提交改动时  如果结束时间早于当前时间则不予提交，并提示用户
      if (data.endTime && data.endTime !== null && data.endTime !== undefined) {
        this.adGroupForm.endTime = moment(data.endTime).format(
          "YYYY-MM-DD HH:mm"
        );
      } else {
        this.endTimeShow = false;
      }
      this.dialogVisible = false;
    },

    handleSub() {
      this.$refs["adGroupForm1"].validate((valid) => {
        if (valid) {
          // 处理数据
          this.setSubData();
        } else {
          this.$message.closeAll();
          this.$message.error("请完善提交信息");
          return false;
        }
      });
    },

    // 处理需要提交的数据
    setSubData() {
      this.diaLoading = true;
      this.diaLoadingTxt = "数据处理中，请稍后";
      let startTime1 =
        this.timeZone !== "UTC"
          ? moment(this.adGroupForm.startTime).utc().format("YYYY-MM-DD HH:mm")
          : moment(this.adGroupForm.startTime).format("YYYY-MM-DD HH:mm");
      const nowTime1 = moment().utc().format("YYYY-MM-DD HH:mm");
      const startFlag = moment(startTime1).isAfter(nowTime1);
      if (!startFlag && !this.startTimeDisabled) {
        startTime1 = moment().utc().add(20, "seconds");
      }
      let endTimeFlag = true;
      if (this.endTimeShow) {
        // 投放结束时间判断;如果有选择结束时间
        if (!this.adGroupForm.endTime) {
          this.diaLoading = false;
          this.$message.closeAll();
          this.$message.error("请选择投放结束时间");
          endTimeFlag = false;
          return;
        } else {
          // 开始时间晚于结束时间
          const falg = moment(this.adGroupForm.startTime)
            .add(1, "m")
            .isAfter(this.adGroupForm.endTime);
          if (falg) {
            this.$message.closeAll();
            this.diaLoading = false;
            this.$message.error("投放结束时间必须晚于投放开始时间");
            endTimeFlag = false;
            return;
          } else {
            endTimeFlag = true;
          }
        }
      } else {
        this.adGroupForm.endTime = "";
        endTimeFlag = true;
      }

      const targeForm = JSON.parse(JSON.stringify(this.targeForm));
      const campaignForm = JSON.parse(JSON.stringify(this.campaignForm));
      const adGroupForm = JSON.parse(
        JSON.stringify({ ...this.adGroupForm, startTime: startTime1 })
      );
      // 获取分时段
      if (this.campaignForm.adchannelType === "DISPLAY") {
        delete targeForm.daypartInt;
      }

      if (!Array.isArray(targeForm.deviceClassStr)) {
        // 受众-设备
        if (targeForm.deviceClassStr.indexOf(",") !== -1) {
          // 设备转换成数组
          targeForm.deviceClassStr = ["all"];
        } else {
          targeForm.deviceClassStr = [targeForm.deviceClassStr];
        }
      }

      if (!Array.isArray(targeForm.genderStr)) {
        // 受众-性别转换
        if (targeForm.genderStr.indexOf(",") !== -1) {
          targeForm.genderStr = ["all"]; // 性别如果不限  则删除这个键值对
        } else {
          targeForm.genderStr = [targeForm.genderStr];
        }
      }

      if (targeForm.minMaxAge.minAge === "all") {
        // 设置年龄
        delete targeForm.minMaxAge;
      } else if (targeForm.minMaxAge.maxAge === 65) {
        delete targeForm.minMaxAge.maxAge;
      }

      if (
        targeForm.appDownloadersStr &&
        targeForm.appDownloadersStr !== "all"
      ) {
        // 如果填写当前app的appid,就代表只允许新用户下载；
        targeForm.appDownloadersStr = [campaignForm.adamId]; // 如果只能新用户下载，包裹起来
      } else {
        targeForm.appDownloadersStr = ["all"]; // 如果只能新用户下载，包裹起来
      }

      if (!adGroupForm.endTime) {
        // 如果结束时间不显示
        adGroupForm.endTime = "";
      } else {
        adGroupForm.endTime =
          this.timeZone === "UTC"
            ? moment(this.adGroupForm.endTime).utc().format("YYYY-MM-DDTHH:mm")
            : moment(this.adGroupForm.endTime).format("YYYY-MM-DD HH:mm");
      }

      if (adGroupForm.endTime) {
        const initialData = JSON.parse(this.adGroupFormCopy);
        const nowTime = moment.utc().format("YYYY-MM-DD HH:mm");
        const endTime =
          this.timeZone === "UTC"
            ? moment(this.adGroupForm.endTime).utc().format("YYYY-MM-DDTHH:mm")
            : moment(this.adGroupForm.endTime).format("YYYY-MM-DD HH:mm");

        const after = moment(endTime).isAfter(moment(nowTime));
        if (initialData.endTime) {
          const diff =
            moment(initialData.endTime).diff(moment(endTime), "second") === 0;
          if (!after && diff) {
            this.$message.closeAll();
            this.diaLoading = false;
            this.$message.error(
              "投放结束时间不得早于当前UTC时间" +
                moment().utc().format("YYYY-MM-DD HH:mm")
            );
            endTimeFlag = false;
            return;
          } else {
            if (diff) {
              delete adGroupForm.endTime;
            }
          }
        } else {
          if (!after) {
            this.$message.closeAll();
            this.diaLoading = false;
            this.$message.error(
              "投放结束时间不得早于当前UTC时间" +
                moment().utc().format("YYYY-MM-DD HH:mm")
            );
            endTimeFlag = false;
            return;
          }
        }
      }

      if (!this.startTimeDisabled) {
        adGroupForm.startTime = moment(startTime1).format(
          "YYYY-MM-DDTHH:mm:ss.000"
        ); // 设置开始时间;
      } else {
        delete adGroupForm.startTime;
      }

      if (adGroupForm.endTime) {
        adGroupForm.endTime = moment(adGroupForm.endTime).format(
          "YYYY-MM-DDTHH:mm:ss.000"
        );
      }

      if (!adGroupForm.cpaGoalNub) {
        adGroupForm.cpaGoalNub = 0;
      }

      if (targeForm.daypartInt && !targeForm.daypartInt.length) {
        delete targeForm.daypartInt;
      }

      // 设置地理位置信息
      if (
        (this.campaignForm.countriesOrRegions &&
          this.campaignForm.countriesOrRegions.length > 1) ||
        this.locVal.length < 1
      ) {
        if (targeForm.adminArea) {
          delete targeForm.adminArea;
        }
        if (targeForm.localLity) {
          delete targeForm.localLity;
        }
      } else {
        const adminArea = [];
        const localLity = [];
        this.locVal.forEach((item) => {
          const index = this.locList.findIndex((v) => {
            return v.id === item;
          });
          if (index !== -1) {
            if (this.locList[index].entity === "Locality") {
              localLity.push(this.locList[index].geolocationid);
            } else {
              adminArea.push(this.locList[index].geolocationid);
            }
          }
        });

        if (localLity.length) {
          targeForm.locality = {
            included: [...localLity],
          };
        }
        if (adminArea.length) {
          targeForm.adminArea = {
            included: [...adminArea],
          };
        }
      }
      // if(adGroupForm.cpaGoalNub * 1 === 0) {
      //   let {cpaGoalNub, ...adGroupForm} = adGroupForm
      // }
      // 设置受众国家
      const obj = {
        teamId: this.$store.state.team.teamId || "",
        currencyType:
          this.$route.query.currencyType || this.$store.state.user.unit,
        adGroupId: this.$route.query.adGroupId,
        campaignId: this.$route.query.campaignId,
        orderId: "",
        orgId: this.$route.query.orgId || "", // 如果是自助投放为空
        uuid: this.$route.query.uuid || "",
        aId: this.$route.query.aId || this.$route.query.aid || "",
        userId: this.$store.state.user.userInfo.userId,
        adGroupUpdate: {
          ...adGroupForm,

          targetingDimensions: {
            ...targeForm,
          },
        },
      };
      // 判断obj.adGroupUpdate.cpaGoalNub是否为0， 结构赋值
      if (obj.adGroupUpdate.cpaGoalNub === 0) {
        let { cpaGoalNub, ...data } = obj.adGroupUpdate;
        obj.adGroupUpdate = data;
      }
      this.handleSubEdit(obj);
    },

    async handleSubEdit(obj) {
      this.diaLoading = true;
      this.diaLoadingTxt = "数据提交中，请稍后";

      const res = await modifyAdgroups([obj]);
      this.diaLoading = false;
      if (res.data.code && res.data.code === 20000) {
        this.dialogVisible = false;
        this.loading = true;
        this.loadingTxt = "数据更新中，请稍后";

        setTimeout(() => {
          this.findAdgroupsOne();
        }, 2500);
      } else {
        this.$message.closeAll();
        this.$message.error(res.data.message || "服务器错误，请稍后重试");
      }
    },

    changeSwitch() {
      this.adGroupForm.automatedKeywordsOptIn =
        !this.adGroupForm.automatedKeywordsOptIn;
      this.$forceUpdate();
    },
  },
};
</script>

<style lang="scss" scoped="true">
@import "./styles/index.scss";

.el-dialog__body {
  ::v-deep label.el-form-item__label,
  .label {
    font-style: normal;
    font-weight: bold;
    font-size: $mainTextFont4;
  }

  ::v-deep .before-set {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    img {
      display: inline-block;
      width: 30px;
      height: 30px;
      margin-right: 24px;
      background-color: #9fc4f7;
      border-radius: 4px;
    }

    P {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 30px;
      margin-right: 24px;
      display: inline-block;
      color: #000000;
    }
  }

  ::v-deep .btn-list {
    .el-button {
      width: 150px;
      height: 50px;
      border: 1px solid #bdc5cb;
      border-radius: 4px;
      margin-right: 40px;
    }

    .el-button--primary {
      border-color: #3f9fff;
    }
  }

  ::v-deep .set-box {
    .set-title {
      padding: 20px 0;
      border-bottom: 1px solid #eee;
      margin-bottom: 24px;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;

      // line-height: 30px;
    }
  }

  .el-form {
    .add-btn {
      width: 100%;
      background: #ffffff;
      border: none;
      box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
      border-radius: 4px;
      color: $mainColor1;
    }

    .el-select,
    .el-input-number,
    .el-form-item__content,
    .el-input,
    .el-input__inner {
      width: 100%;
      max-width: 640px;
    }

    ::v-deep.el-input-number input {
      text-align: left;
    }

    ::v-deep .el-input-number .el-input {
      position: relative;
    }

    .is-required .label {
      text-indent: 1em;
      position: relative;

      &::after {
        display: inline-block;
        content: "*";
        color: #f56c6c;
        margin-right: 4px;
        position: absolute;
        top: 0;
        left: -1em;
      }
    }

    label.el-form-item__label,
    .label {
      padding: 0 !important;
    }

    .label {
      display: flex;
      align-items: center;
      font-weight: bold;

      i {
        color: #c6c6c6;

        font-size: 18px;
      }
    }
  }
}

.appInfo {
  .lt.img {
    width: 64px;
    height: 64px;
    border-radius: 4px;
    overflow: hidden;
    margin-right: 14px;
  }

  .rt {
    .title {
      font-style: normal;
      font-weight: bold;
      font-size: 20px;
      color: #39444e;
      margin-bottom: 20px;
    }

    .sub-title {
      font-style: normal;
      font-weight: normal;
      font-size: 14px;
      line-height: 18px;
      /* identical to box height, or 129% */
      color: #acb6c2;
    }
  }
}

.status-box {
  padding-left: 14px;
  font-size: 14px;
  position: relative;

  em {
    position: absolute;
    top: -40px;
    right: 0;
  }
}

.shou-zhong-box ::v-deep.el-collapse-item__arrow {
  margin: 0 8px;

  &.el-icon-arrow-right:before {
    content: "\e791" !important;
  }
}

.el-dialog__wrapper /deep/ .el-form-item__content .label {
  line-height: 14px;
  padding-bottom: 12px !important;
}

.el-dialog__wrapper /deep/ .el-form-item--mini.el-form-item,
.el-dialog__wrapper /deep/ .el-form-item--small.el-form-item {
  margin-bottom: 26px;
}

.el-dialog__wrapper /deep/ .el-form-item--small .el-form-item__error {
  padding-top: 4px;
}

::v-deep .el-dialog__body {
  padding-bottom: 65px !important;
}
::v-deep .el-collapse {
  border: none;
}
::v-deep .el-collapse-item__header {
  height: auto;
  padding-top: 14px;
  padding-bottom: 24px;
  border: none;
}

::v-deep .el-collapse-item__wrap {
  border: none;
}

::v-deep .choose-time-box {
  .el-input__prefix {
    display: none;
  }
}

.edit-ad ::v-deep .el-dialog {
  margin-bottom: 80px;
}
</style>
